﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/share/_meta.jsp" %>
<%@ include file="/share/_footer.jsp" %>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>系统管理中心 <span class="c-gray en">&gt;</span> 交易中心
	<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
	<form class="codeView docs-example">
		开始时间:<input type="text" class="input-text radius size-L" name="startTime" style="width:150px" id="startTime" >
		结束时间:<input type="text" class="input-text radius size-L" name="endTime" style="width:150px" id="endTime" >
		<div class="form-group">
			<select class="form-control" name="parentId" style="width:250px" id="parentId">
				<option value='' disabled selected style='display:none;'>小区</option>
				<option></option>
				<c:forEach items="${parentList}" var="item">
					<option value="${item.id}" <c:if test="${query.parentId==item.id }">selected</c:if>>${item.name}</option>
				</c:forEach>
			</select>
		</div>
		<button type="button" class="btn btn-secondary radius size-L" onclick="queryList()">查&nbsp;询</button>
	</form>

	<div class="panel panel-default mt-20">
		<div class="panel-header">
			数据列表
		</div>
		<div class="panel-body">
			<table class="table table-border table-bordered table-bg table-hover table-sort table-striped">
				<thead>
				<tr class="text-c">
					<th>项目</th>
					<th>户数</th>
					<th>金额</th>
				</tr>
				</thead>
				<tbody>

				</tbody>
			</table>
			<br>
			<br>
		</div>
	</div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/h-ui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/h-ui/common/laydate.js"></script>
<script type="text/javascript">
	$(function(){
        laydate.render({
            elem: '#startTime' //指定元素
            ,format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#endTime' //指定元素
            ,format: 'yyyy-MM-dd'
        });
		queryList();
	})

	function queryList(){
		$(".table-sort").dataTable().fnDestroy();
		$(".table-sort").DataTable({
			bStateSave: false,
			aoColumnDefs: [{bSortable: false}],
			pageLength: 10,
			searching: false,
			bFilter: false,
			bSort:false,
			aLengthMenu:[10],
			serverSide:true,//实现后台分页
			lengthChange: false,
			bPaginate: true,
			ajax: {
				url: "${pageContext.request.contextPath}/rest/billAccount/tableTradeCenter",
				dataSrc: "data",
				data: function ( d ) {
					d.housingId = $("#parentId option:selected").val();
                    d.startTime = $("#startTime").val();
                    d.endTime = $("#endTime").val();
				}
			},
			/*fnDrawCallback: function () {
			 var api = this.api();
			 api.column(0).nodes().each(function (cell, i) {
			 cell.innerHTML = i + 1;
			 });
			 },*/
			aoColumns: [//列绑定
				{"data": "costTypeName"},
				{"data": "countNum"},
				{"data": "sumAmount"},
			],
			aoColumnDefs: [//列定义
				{
					"aTargets": [0],
					"mData": "costTypeName",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [1],
					"mData": "userNum",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [2],
					"mData": "sumAmount",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}
			],
			language: {
				aria: {
					sortAscending: ": activate to sort column ascending",
					sortDescending: ": activate to sort column descending"
				},
				emptyTable: "没有数据",
				info: "从 _START_ 到 _END_ 共 _TOTAL_ 条",
				infoEmpty: "没有数据",
				infoFiltered: "(0 到 _MAX_ 条)",
				lengthMenu: " _MENU_",
				search: "查询:",
				zeroRecords: "没有数据",
				paginate: {previous: "<", next: ">", last: "最后一页", first: "第一页"}
			}
		})
	}

</script>

